<template>
  <!-- 添加订单 -->
  <div class="add-order">
    <a-modal title="添加订单信息" :visible="props.show" @ok="handleOK" @cancel="close">
      <a-form ref="formRef" :model="addForm" :rules="rules" :label-col="{span:6}" :wrapper-col="{span:12}">
        <a-form-item label="客户名" name="cusName">
          <a-select v-model:value="addForm.cusName" placeholder="请选择" @change="cusNameChange">
            <a-select-option :value="item.cusName" v-for="(item,index) in newCusName" :key="index">{{item.cusName}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="联系方式 " name="cusPhone">
          <a-input v-model:value="addForm.cusPhone" readOnly />
        </a-form-item>
        <a-form-item label="项目名称 " name="projectName">
          <!-- <a-input v-model:value="addForm.projectName" /> -->
          <a-select v-model:value="addForm.projectName" placeholder="请选择" @change="projectNameChange">
            <a-select-option :value="item.projectName" v-for="(item,index) in newProjectName" :key="index">{{item.projectName}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="下单日期">
          <a-date-picker v-model:value="addForm.orderDate"></a-date-picker>
        </a-form-item>
        <a-form-item label="支付状态">
          <a-select v-model:value="addForm.payState" placeholder="请选择">
            <a-select-option value="0">待支付</a-select-option>
            <a-select-option value="1">已支付</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, onMounted, reactive, ref } from "vue";
import { order } from "../../../service";
import { message } from "ant-design-vue";
import store from "../../../store/index";
//不要ref  表单初始数据
// const formData = {
//   cusId: "",
//   cusName: "",
//   cusPhone: "",
//   projectId: "",
//   projectName: "",
//   orderDate: "",
//   payState: "", //0待支付 1已支付
// };
export default defineComponent({
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    initData: {
      type: Object,
    },
  },
  setup(props, context) {
    /**表单校验 */
    const formRef = ref();
    const rules = {
      cusName: [
        {
          required: true,
          message: "客户名必填",
          trigger: "blur",
        },
      ],
      projectName: [
        {
          required: true,
          message: "项目名必填",
          trigger: "blur",
        },
      ],
    };

    const customerInfo = ref([]);
    const newCustomerInfo = ref([]);
    const projectInfo = ref([]);
    const newProjectInfo = ref([]);
    const newCusName = ref([]);
    /**获取项目信息  客户名 客户id 项目名 项目id*/
    onMounted(async () => {
      await store.dispatch("getProjectInfo");
      projectInfo.value = store.state.projectInfo.list;
      newProjectInfo.value = projectInfo.value.map((item, index) => {
        return Object.assign(
          {},
          {
            cusName: item.pcusName,
            cusId: item.pcusId,
            projectName: item.projectName,
            projectId: item._id,
          }
        );
      });
      /** 数组去重  客户名去重*/
      var obj = {};
      newCusName.value = newProjectInfo.value.reduce((current, next) => {
        obj[next.cusName]
          ? ""
          : (obj[next.cusName] = true && current.push(next));
        return current;
      }, []);
    });
    /**根据当前客户名 查电话号码   筛选项目名称  客户表*/
    const newProjectName = ref([]);

    onMounted(() => {
      //如果客户名存在 找联系方式
      //  if(addForm.cusName)
      console.log("addForm.cusName", addForm.value.cusName);
       //获取cusName对应的project信息   project表
      // newProjectName.value = [];    todo!!!!!!
      
    });
    const cusNameChange = async (val) => {
      await store.dispatch("getCustomerInfo");
      customerInfo.value = store.state.customerInfo.list;
      //根据cusName 找对应addForm.value.cusPhone
      for (let i = 0; i < customerInfo.value.length; i++) {
        if (customerInfo.value[i].cusName == val) {
          addForm.value.cusPhone = customerInfo.value[i].cusPhone;
          addForm.value.cusId = customerInfo.value[i]._id;
        }
      }

      //获取cusName对应的project信息   project表
      newProjectName.value = [];
      for (let i = 0; i < newProjectInfo.value.length; i++) {
        if (newProjectInfo.value[i].cusName == val) {
          newProjectName.value.push(newProjectInfo.value[i]);
        }
      }
      console.log("newProjectName.value", newProjectName.value);
    };
    /**项目名称选择后 */
    const projectNameChange = (val) => {
      console.log(
        "项目名称选择后",
        val,
        "projectInfo.value",
        projectInfo.value
      );

      //找项目对应的addForm.value.projectId
      for (let i = 0; i < projectInfo.value.length; i++) {
        if (projectInfo.value[i].projectName == val) {
          addForm.value.projectId = projectInfo.value[i]._id;
        }
      }
    };

    /**添加信息 */
    const addForm = ref(JSON.parse(JSON.stringify(props.initData)));
    const handleOK = async () => {
      formRef.value.validate().then(async () => {
        const res = await order.add(addForm.value);
        if (res.data.code == 200) {
          console.log("order.add", res.data.data);
          message.success(res.data.msg);
          //添加成功,关闭modal
          context.emit("setShow", false);
        } else {
          message.error(res.data.msg);
        }
      });
    };
    /**关闭弹窗 */
    const close = () => {
      context.emit("setShow", false);
    };

    return {
      formRef,
      rules,

      addForm,

      handleOK,

      props,
      close,
      projectInfo,
      newProjectInfo,
      newCustomerInfo,
      newCusName, //项目信息中的 客户名
      newProjectName,
      cusNameChange,
      rules,
      projectNameChange,
    };
  },
});
</script>

<style lang='less'>
</style>